<template>
  <div class="container">
    <el-form :model="searchList" ref="searchList" size="normal">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.ensure_dept" placeholder="请输入保障部门" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.company_name" placeholder="请输入单位名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="onAdds">添加选中项</el-button>
            <el-button type="primary" size="medium" @click="search">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData.results" border stripe :height="offsetHeight" v-loading="loading" ref="tableData">
      <el-table-column type="selection" label="" width="50" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="ensure_dept" label="保障部门" align="center">
      </el-table-column>
      <el-table-column prop="company_name" label="单位名称" align="center">
      </el-table-column>
      <el-table-column prop="service_pre_amount" label="申请金额" width="100" align="center">
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="onAdd(row.company_code)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UnitAdd',
  components: {

  },
  props: {
    unitId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 210,
      loading: false,
      searchList: {},
      tableData: [],
      pageNo: '1',
      pageSize: '10',
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('verifyUnitPage', {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchList
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.pageNo = '1'
      this.pageSize = '10'
      this.init()
    },
    onAdd (code) {
      this.$confirm('是否确认添加?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.add(code)
      }).catch(() => {

      });
    },
    onAdds () {
      if (this.$refs.tableData.selection.length <= 0) {
        this.$tips.error('请选择至少一条')
        return false
      }
      let codes = this.$util.arrToStr(this.$refs.tableData.selection, 'company_code')

      this.$confirm('是否确认添加选中项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.add(codes)
      }).catch(() => {

      });
    },
    async add (codes) {
      this.loading = true
      const res = await this.$http('verifyUnitUp', {
        flag: 'append',
        id: this.unitId,
        company_codes: codes
      })
      this.$tips.success(res.errmsg)
      this.init()
      this.$emit('init')
    },
    // table分页
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
</style>
